<template>
  <base-modal
    size="mini"
    :title="$t('smartPlan.previewConfirm')"
    :show.sync="visible"
    width="80%"
    class="preview-plan-range-dialog"
  >
    <div class="base-modal-content preview-plan-rangen-content">
      <common-table
        v-if="isInit"
        ref="commonTable"
        :create-dimension="createDimension"
        :fields="fields"
        :list-data="listData"
        :total="total"
        :list-loading="loading"
        @search="handleSearch"
      >
        <div slot="header_left">
          <el-radio-group v-model="moduleType" @change="moduleTypeChange">
            <el-radio-button label="customer">{{ $t('common.base.customer') }}</el-radio-button>
            <el-radio-button label="product">{{ $t('common.base.product') }}</el-radio-button>
            <el-radio-button label="contract">{{ $t('contract.contract') }}</el-radio-button>
          </el-radio-group>
        </div>
      </common-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
import CommonTable from '@src/modules/smartPlan/common/commonTable.vue'
import { getCustomerFields } from '@src/api/CustomerApi'
import { getProductFields } from '@src/api/ProductApi'
import { contractFieldList } from '@src/api/ContractApi'
import { showPlanRange } from '@src/modules/smartPlan/api/index.js'
import { convertQualityInfoRemoteDataToFormQualityInfoFieldValue } from '@service/QualityInfoService.ts'
import { t } from '@src/locales'

export default {
  name: 'preview-plan-range-dialog',
  data() {
    return {
      isInit: false,
      visible: false,
      moduleType: 'customer',
      conditions: [],
      customerFields: [],
      productFields: [],
      contractFields: [],
      listData: [],
      loading: false,
      total: 0,
    }
  },
  computed: {
    fields() {
      if (this.moduleType == 'product') return this.productFields
      if (this.moduleType == 'customer') return this.customerFields
      return this.contractFields
    },
    createDimension() {
      if (this.moduleType == 'product') return 0
      if (this.moduleType == 'customer') return 1
      return 2
    },
  },
  mounted() {
    this.getFields()
  },
  methods: {
    init() {
      if (this.$refs.commonTable) {
        this.$refs.commonTable.page = {
          pageNum: 1,
          pageSize: 10
        }
        this.$refs.commonTable.keyword = ''
        this.$nextTick(() => {
          this.$refs.commonTable.buildColumns()
        })
      }
    },
    open(conditions) {
      this.visible = true
      this.moduleType = 'customer'
      this.init()
      this.conditions = conditions
      this.getList()
    },
    async moduleTypeChange() {
      this.init()
      this.loading = true
      await this.getFields()
      this.getList()
      this.$nextTick(() => {
        this.$refs.commonTable.buildColumns()
      })
    },
    handleSearch(params) {
      this.getList(params)
    },
    async getFields() {
      let res = null
      if (this.moduleType == 'customer') {
        if (this.customerFields.length) return
        res = await getCustomerFields({isFromSetting: false})
        if (res.data && res.data.length) {
          const customerIndex = res.data.findIndex(f => f.formType == 'customer')
          res.data.splice(customerIndex + 2, 0, {
            displayName: t('common.label.customerTag'),
            fieldName: 'customerTag',
            isSystem: 1,
            tableName: 'customer',
          })
        }
        this.customerFields = (res?.data || []).filter(f => f.isSystem == 1)
      } else if (this.moduleType == 'product') {
        if (this.productFields.length) return
        res = await getProductFields({isFromSetting: false})
        const customerField = res?.data?.filter(f => f.formType == 'customer')[0]
        const customerIndex = res?.data?.findIndex(f => f.formType == 'customer')
        if (customerField && customerField.setting?.customerOption?.linkman) {
          res.data.splice(customerIndex + 1, 0, {
            displayName: t('common.base.contact'),
            fieldName: 'linkman',
            isSystem: 1,
            tableName: 'product'
          }, {
            displayName: t('common.base.phone'),
            fieldName: 'phone',
            isSystem: 1,
            tableName: 'product'
          })
        }
        if (customerField && customerField.setting?.customerOption?.address) {
          res.data.splice(customerIndex + 1, 0, {
            displayName: t('common.form.type.customerAddress'),
            fieldName: 'customerAddress',
            isSystem: 1,
            tableName: 'product'
          })
        }
        this.productFields = (res?.data || []).filter(f => f.isSystem == 1)
      } else if (this.moduleType == 'contract') {
        if (this.contractFields.length) return
        res = await contractFieldList()
        this.contractFields = (res?.result || []).filter(f => f.isSystem == 1)
      }
      this.isInit = true
    },
    buildParams() {
      return {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      }
    },
    getList(params) {
      const searchParams = {
        moduleType: this.moduleType,
        planRangeList: this.conditions,
        ...this.buildParams(),
        ...params
      }
      this.loading = true
      showPlanRange(searchParams).then(res => {
        this.loading = false
        this.listData = (res.data?.list || []).map(item => {
          return {
            ...Object.assign(item, convertQualityInfoRemoteDataToFormQualityInfoFieldValue(item, true)),
            ...item.attribute
          }
        })
        this.total = res.data?.total || 0
      })
    },
  },
  components: {
    CommonTable,
  },
}
</script>
<style lang="scss">
.preview-plan-range-dialog {
  .base-modal .base-modal-body {
    padding: 20px 20px 0;
  }
}
</style>